<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<body>
<div class="pull-left">
    <div class="form-group form-inline">
        总共 ${pageInfo.pages} 页，共 ${pageInfo.total} 条数据，每页
        <input type="number" value="${pageInfo.pageSize}" id="page-size"
               onchange="goPage('${pageInfo.pageNum}',this.value)"
               style="width: 40px;text-align: center">
        (1 ~ 20)条数据。
    </div>
</div>

<div class="box-tools pull-right">
    <ul class="pagination" style="margin: 0px;">
        <li>
            <a href="javascript:goPage(1, ${pageInfo.pageSize})" aria-label="Previous">首页</a>
        </li>
        <li><a href="javascript:goPage('${pageInfo.prePage}', '${pageInfo.pageSize}')">上一页</a></li>
        <c:forEach
                begin="${pageInfo.pageNum - 5 > 0 ? pageInfo.pageNum - 5 : 1}"
                end="${pageInfo.pageNum + 5 < pageInfo.pages ? pageInfo.pageNum +5 : pageInfo.pages}"
                var="i">
            <li class="paginate_button ${pageInfo.pageNum==i ? 'active':''}"><a href="javascript:goPage('${i}','${pageInfo.pageSize}')" id="pageNum-a">${i}</a></li>
        </c:forEach>
        <li><a href="javascript:goPage('${pageInfo.nextPage}', '${pageInfo.pageSize}')">下一页</a></li>
        <li>
            <a href="javascript:goPage('${pageInfo.pages}', '${pageInfo.pageSize}')" aria-label="Next">尾页</a>
        </li>
    </ul>
</div>
<form id="pageForm" action="${param.pageUrl}" method="post">
    <input type="hidden" name="pageNum" id="pageNum">
    <input type="hidden" name="pageSize" id="pageSize">
</form>
<script>
    function goPage(pageNum, pageSize) {
        if (pageNum == 0) pageNum = 1
        // 限制输入每页数量的最大最小值
        if (pageSize > 20) {
            pageSize = 20
        } else if (pageSize < 1) {
            pageSize = 1
        }
        document.getElementById("pageNum").value = pageNum
        document.getElementById("pageSize").value = pageSize
        $("#pageForm").submit()
    }
</script>
</body>
</html>
